<template>
    <div>
        <el-container style="height: 850px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(70, 76, 91); display: flex; justify-content: flex-end; align-items: center">
                
                <div style="margin-left: auto; display: flex; align-items: center;">
                    <el-button style="background-color: #464c5b; border: none; color: white; font-size: 17px;" @click="handlePassword">
                        <i class="el-icon-info" style="margin-right: 5px;"></i>修改密码</el-button>
                    <el-button style="background-color: #464c5b; border: none; color: white; font-size: 17px;" @click.native="logout">
                        <i class="el-icon-remove" style="margin-right: 5px;"></i>退出登录</el-button>
                </div>
                
            </el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '2', '3','4', '5']"  ref="menus" @close="handleClose">
                        
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-star-on"></i><router-link to="/firstPage"><span style="font-size: 18px">首页</span></router-link></template>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-user-solid"></i><span style="font-size: 18px">班级学员管理</span></template>
                            
                                <el-menu-item index="2-1">
                                    <router-link to="/class">班级管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="2-2">
                                    <router-link to="/stu">学员管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-s-help"></i><span style="font-size: 18px">系统信息管理</span></template>
                            
                                <el-menu-item index="3-1">
                                    <router-link to="/dept">部门管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="3-2">
                                    <router-link to="/emp">员工管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="4">
                            <template slot="title"><i class="el-icon-menu"></i><span style="font-size: 18px">课程教务管理</span></template>
                            
                                <el-menu-item index="4-1">
                                    <router-link to="/course">课程管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="4-2">
                                    <router-link to="/course-manage">课程安排</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="5">
                            <template slot="title"><i class="el-icon-s-data"></i><span style="font-size: 18px">数据统计管理</span></template>
                            
                                <el-menu-item index="5-1">
                                    <router-link to="/emp-rep">员工信息统计</router-link>
                                </el-menu-item>
                                <el-menu-item index="5-2">
                                    <router-link to="/stu-rep">学员信息统计管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!--修改密码对话框-->
                    <el-dialog ref="form" title="修改密码" :visible.sync="dialogPassWordVisible" width="30%">
                    <el-form ref="form" :model="theEmp" label-width="80px" size="mini">
                        <el-form-item label="用户名">
                            <el-input v-model="theEmp.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>

                        <el-form-item label="新密码">
                            <el-input type="password" v-model="newPassword" placeholder="请输入新密码" show-password></el-input>
                        </el-form-item>

                        
                        <el-form-item>
                            <el-button type="primary" @click="updatePassword">提交</el-button>
                            <el-button @click="dialogPassWordVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                    </el-dialog>

                    <div class="parentDiv">
                        <div class="childDiv1">
                            <div class="up">
                                <div class="left">
                                    <span class="text">员工性别统计</span>
                                </div>
                                <div class="right">
                                    <span class="text">员工职位管理</span>
                                </div>
                            </div>
                        </div>
                        <div class="childDiv2">
                            <div class="flex-container">
                                <div id="pieChart"></div>
                                <div id="barChart"></div>
                            </div>
                        </div>
                    </div>
                    
                    
                    
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { removeToken, getEmp} from '@/utils/auth'
import { updateEmp, selectByEmpId } from '@/api/emp'
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';

import { genderCount, jobCount } from "@/api/emp.js";

export default {
    data() {
        return {
            genderData: [],
            jobData: [],
            barChart: null,
            pieChart: null,

            theEmp: {},
            oldPassword: "",
            newPassword: "",
            dialogPassWordVisible: false,
        }
    },
    created() {
        // 注册必须的组件
        echarts.use([
            TooltipComponent,
            LegendComponent,
            PieChart,
            CanvasRenderer,
            LabelLayout,
            GridComponent, 
            BarChart
        ]);
        
    },
    mounted() {
        this.theEmp = JSON.parse(getEmp());
        selectByEmpId(this.theEmp.id).then((result) => {
                if (result.data.code == 1) {
                    this.theEmp = result.data.data;
                    this.theEmp;
                }
        });

        genderCount().then((result) => {
            this.genderData = result.data.data;
        });
        jobCount().then((result) => {
            this.jobData = result.data.data;
        });


        this.pieChart = echarts.init(document.getElementById('pieChart'));
        this.barChart = echarts.init(document.getElementById('barChart'));
        

        let optionPie = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            
            series: [
                {
                name: '员工性别统计',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: this.genderData
                }
            ]
        };

        let optionBar = {
            xAxis: {
                type: 'category',
                data: this.jobData.map(item => item.empJob)
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: this.jobData.map(item => item.count),
                type: 'bar',
                }
            ]
        };

        this.pieChart.setOption(optionPie);
        this.barChart.setOption(optionBar);
    },

    watch: {
        jobData: {
            handler(){
                this.barChart.setOption({
                    xAxis: {
                        data: this.jobData.map(item => item.empJob)
                    },
                    series: [
                        {
                        data: this.jobData.map(item => item.count),
                        }
                    ]
                });
            }
        },
        genderData: {
            handler(){
                this.pieChart.setOption({
                    series: [
                        {
                        data: this.genderData
                        }
                    ]
                });
            }
        },
    },

    methods: {
        handleClose(key, keyPath) {
            this.$refs.menus.open(keyPath);
        },
        //退出登录
        async logout() {
            removeToken();
            this.$router.push('/login')
        },

        //修改密码
        handlePassword() {
            this.oldPassword = this.theEmp.password;
            this.newPassword = '';
            this.dialogPassWordVisible = true;
        },

        updatePassword() {
            if (this.newPassword === this.oldPassword) {
                this.$message.error("新密码与旧密码一致, 重新输入!");
            } else {
                this.theEmp.password = this.newPassword;

                let operator;

                operator = updateEmp(this.theEmp);

                operator.then((resp) => {
                    if (resp.data.code == "1") {
                    this.dialogPassWordVisible = false;
                    //this.page();
                    this.$message({ message: "恭喜你，修改成功", type: "success" });
                    } else {
                    this.$message.error(resp.data.msg);
                    }
                });

            }
        },
    },
}
</script>

<style>


.parentDiv{
        
        width:100%;
        height:700px;
        display:flex;
        flex-direction: column;
}
.childDiv1{
        
        width:100%;
        height: 100px;
 }
.childDiv2{
        
        width:100%;
        flex:1;
}

.flex-container {
    display: flex;
}

.up {

    display: flex;
    text-align: center;
}

.left {

    width: 600px;
    flex: 5;
    margin: 40px, auto;
}

.right {

    width: 600px;
    flex: 5;
    margin: 40px, auto;
}

.text {
    font-family: '楷体';
    font-weight: 400;
    font-style: normal;
    font-size: 36px;
}

#pieChart {
    width: 600px;
    height: 400px;
    flex: 5;
}

#barChart {
    width: 600px;
    height: 400px;
    flex: 5;
}

.router-link-active {
  text-decoration: none;
  color: rgb(0, 110, 255);
}
a{
  text-decoration: none;
  color: black;
}
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	display: none; 

}

.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	display: none;

}
</style>